<template>
  <!-- 贷后管理 -->
  <div class="postloanaview">
   
    <div class="div">
      <el-select v-model="value" class="m-2" placeholder="企业管理">
        <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="input">
        <el-icon>
          <Search />
        </el-icon>
        <input v-model="input" placeholder="Please input" class="inputs" />
      </div>
      <el-select v-model="value" class="m-2" placeholder="状态">
        <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="value" class="m-2" placeholder="企业类型">
        <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="caozuo">
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </div>
    </div>



  </div>
  
  <!-- 表格部分 -->
  <div class="table">
    <el-table :data="tableData" style="width: 100%" @click="change()" >
      <el-table-column prop="date" label="序号"></el-table-column>
      <el-table-column prop="date" label="ABC有限公司" width="180"></el-table-column>
      <el-table-column prop="name" label="企业名称"></el-table-column>
      <el-table-column prop="address" label="社会信用代码"></el-table-column>
      <el-table-column prop="address" label="借款金额"></el-table-column>
      <el-table-column prop="address" label="期限"></el-table-column>
      <el-table-column prop="address" label="已还本金"></el-table-column>
      <el-table-column prop="address" label="应还利息"></el-table-column>
      <el-table-column prop="address" label="已还利息"></el-table-column>
      <el-table-column prop="address" label="手续费"></el-table-column>
      <el-table-column prop="address" label="放款方式"></el-table-column>
      <el-table-column prop="address" label="还款状态"></el-table-column>
      <el-table-column prop="pos" label="操作" >
       
          <!-- <span @click="change()">事件</span> -->
  
        <div class="tubiao">
          <span @click="biaoge"><el-icon>
              <Document />
            </el-icon></span>
          <span text @click="open">
            <el-icon>
              <Files />
            </el-icon>
          </span>
          <span text @click="opens"><el-icon>
              <Football />
            </el-icon></span>
          <span text @click="openr"><el-icon>
              <Wallet />
            </el-icon></span>
        </div>
        
      </el-table-column>
    </el-table>
  </div>
  <el-pagination background layout="prev, pager, next" :total="1000" class="yema"/>
  <!-- 表格2 -->
  <div class="table" v-if="flag">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="序号"></el-table-column>
      <el-table-column prop="date" label="ABC有限公司" width="180"></el-table-column>
      <el-table-column prop="name" label="企业名称" width="180"></el-table-column>
      <el-table-column prop="address" label="社会信用代码"></el-table-column>
      <el-table-column prop="address" label="借款金额"></el-table-column>
      <el-table-column prop="address" label="期限"></el-table-column>
      <el-table-column prop="address" label="已还本金"></el-table-column>
      <el-table-column prop="address" label="应还利息"></el-table-column>
      <el-table-column prop="address" label="已还利息"></el-table-column>
      <el-table-column prop="address" label="手续费"></el-table-column>
      <el-table-column prop="address" label="放款方式"></el-table-column>
      <el-table-column prop="address" label="还款状态"></el-table-column>
      <el-table-column prop="pos" label="操作">
      </el-table-column>
      
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000" class="yema"/>
    </div>
    
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
//弹框
import { markRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'




var router = useRouter();
var flag = ref(false)



var xlxllist = [
  {
    value: '企业管理1',
    label: '企业管理',
  },
]


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189',
  },
]
const change = () => {
  
  flag.value = !flag.value
 
}
// 跳转路由
const biaoge = () => {
  router.push('/home/postloan/postloane')
}
// 弹框内容1
const open = () => {
  ElMessageBox.confirm(
    '是否确认要进行提前还款',

    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      center: true,
    }
  )
}
// 弹框内容2
const opens = () => {
  ElMessageBox.confirm(
    '是否要取消该笔逾期记录',

    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      center: true,
    }
  )
}
// 弹框内容3
const openr = () => {
  ElMessageBox.confirm(
    '是否确认要设置自动还款',

    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      center: true,
    }
  )
}


</script>

<style scoped>
.postloanaview .div {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 20px
}

.title {
  width: 200px;
  height: 40px;
  background-color: aqua;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;

}

.m-2 {
  width: 140px;
}

.postloanaview .input {
  width: 300px;
  height: 30px;
  border: 1px solid #e5e7ec;
  display: flex;
  align-items: center;
  justify-content: space-around;


}

.postloanaview .inputs {
  width: 260px;
  height: 28px;
  border: none;
}

.tubiao {
  width: 100px;
  height: 40px;
  /* background-color: aqua; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #4ba7fe;
  margin: auto;
}

.tubiao span {
  font-size: 20px;
  display: none;
}

.tubiao:hover span {
  display: block;
}
.yema{
  margin: 20px 100px 100px 534px;
}
</style>